<template>
  <div class='page grey-stage member-ranking'>
    <crm-cover v-if="isShowCover" :hideOnBlur="false"></crm-cover>
    <div
    class="scroll-container"
    :style="{
      'padding-top': this.scrollerTop + 'px',
      'height': this.scrollerHeight + 'px',
      'width': this.winWidth + 'px'
    }"
    >

      <div class="no-data-tip" v-if="!Object.keys(data).length">暂无数据</div>
      <div class="bottom">
        <div class="box" v-for="value in data" >
          <div class="left">
            <p>{{value.second_source_name}}</p>
            <mt-progress :value="parseInt(value.custom_rate)" :bar-height="10" :color="value.color" class="new-custom"></mt-progress>
          </div>
          <div class="middle">
            <p>{{ value.custom_count }}人</p>
            <p>{{ value.custom_rate }}%</p>
          </div>

        </div>
      </div>
    </div>
    <crm-tabbar v-if="!isAppMode" activeItem='workbench' ref="tabbar"></crm-tabbar>
  </div>
</template>

<script>
import crmTabbar from '../components/crm-tabbar'
import topFilter from '../components/top-filter'
import MemberItem from '../components/ranking/member-item'


import Q from 'q'
import crmCover from '../components/crm-cover'
import { mapState, mapActions } from 'vuex'
import { Progress } from 'mint-ui'

import { timeOpts } from '../lib/options/time'

export default {
  data () {
    return {
      scrollerTop: '',
      scrollerHeight: '',
      winWidth: '',
      timestamp: '',
      defaultTime: '',
      teamName: '',
      teamId: '',
      sourceId: '',
      data: [],
    }
  },
  components: {
    topFilter,
    crmCover,
    crmTabbar,
    MemberItem,
    'mt-progress': Progress,
  },
  mounted () {
    this.$nextTick(() => {
      this.caculateScroller()
    })
    this._initialize()
  },
  watch: {
    windowSize (size) {
      this.caculateScroller()
    },
  },
  computed: {
    ...mapState({
      isShowCover: state => state.app.isShowCover,
      totalTarget: state => state.app.target,
      user: state => state.app.user,
      windowSize: state => state.app.windowSize,
      isAppMode: state => state.config.isAppMode
    })
  },
  methods: {
    initData () {
      const defaultParams = this.getDefaultParam()
      this.timestamp = defaultParams.timestamp
      this.$getNewCustomList(defaultParams)
    },

    getDefaultParam () {
      const dateObj = new Date()
      let currentYear = dateObj.getFullYear()
      let currentMonth = dateObj.getMonth()
      let currentMonthDate = new Date(currentYear, currentMonth)
      return {
        timestamp: this.defaultTime || currentMonthDate
      }
    },

    caculateScroller () {
      const winHeight = window.innerHeight
      const filterHeight = 0
      const tabbarHeight = this.$refs['tabbar'] ? this.$refs['tabbar'].$el.offsetHeight : 0;
      this.scrollerTop = filterHeight || 42
      this.scrollerHeight = winHeight - filterHeight
      if (!this.isAppMode) {
        this.scrollerHeight = this.scrollerHeight - tabbarHeight
      }
      this.winWidth = window.innerWidth;
    },
    async _initialize () {
      const query = this.$route.query
      this.teamId = query.team_id
      this.defaultTime = parseInt(this.$route.query.time)
      console.log(query)
      let defaultParams = this.getDefaultParam()
      this.sourceId = query.source_id
      defaultParams = Object.assign({
        team_id: this.teamId,
        source_id: this.sourceId
      }, defaultParams)
      const res = await this.getNewCustomSecondSourceList(defaultParams)
      this.data = res.data.results.data || []
    },
    ...mapActions({
      getNewCustomSecondSourceList: 'getNewCustomSecondSourceList'
    })
  },

}
</script>

<style lang="less">
.member-ranking {

  .section-title {
    background-color: #f8f8f8;
    margin-top: 10px;
  }
  .bottom {
    background-color: #f8f8f8;
    margin-top: 10px;
  }

  .echart {
    padding-top: 20px;
    width: 100%;
    height: 420px;
  }

  .scroll-container {
    padding-bottom: 52px;
  }

  .box {
    width: 100%;
    overflow: hidden;
    color: #8F939A;
    font-size: 14px;
    padding-bottom:10px;
    padding-left: 20px;
    padding-top:10px;
    .left{
      width: 80%;
      float: left;
    }
    .spanStyle{
      color:#d9d9d9;
      margin-left: 5px;
    }

    .middle{
      padding-right:10px;
      float: left;
      text-align: center;
    }

    .new-custom{
      .mt-progress-progress {
        background-color: #70c9f4;
        border-radius: 5px;
      }
    }
  }

}
</style>
